<template>
    <view class="box">
        <!-- <view class="status_bar">
            <text>定位地址</text>
        </view> -->
        <view>
            <view>
                <hchPosition :storeData="storeData" :markers="markers">
                </hchPosition>
            </view>
            <view class="myadd">
                <span class="span">我的位置</span>
                <view class="choosemyaddress">
                    <text>{{name}}</text>
                    <image src="../../static/img/myhome/wancheng@3x.png" @click="getAddress()"></image>
                </view>
            </view>
            <view class="other">
                <span class="span">附近回收服务网点</span>
                <view class="otherservice">
                    <view class="view1"><text>金湖服务点</text><text class="text">{{distanceL}}</text></view>
                    <view class="view2"><text>南湖服务点</text><text class="text">1.89km</text></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import hchPosition from "../../components/hch-position/hch-position.vue"
    export default {
        data() {
            return {
                // distanceL: 0,
                storeData: [ //门店信息展示  id name address tel 必填
                    {
                        id: 1,
                        name: '门店XXXXX1号',
                        address: '厦门市思明区汇景商业广场XXX1号',
                        tel: '12345678900',
                    }, {
                        id: 2,
                        name: '门店XXXXX2号',
                        address: '厦门市思明区汇景商业广场XXX2号',
                        tel: '12345678900',
                    },
                ],
                markers: [ //门店在地图上的标记 以下字段必填 
                    {
                        id: 1,
                        latitude: 22.81673,
                        longitude: 108.3740,
                        iconPath: '../../static/hch-position/002.png',
                        callout: {
                            content: "门店XXXXX1号店",
                            borderRadius: 10,
                            padding: 10,
                            display: "ALWAYS",
                        }
                    }, {
                        id: 2,
                        latitude: 22.81673,
                        longitude: 108.3720,
                        iconPath: '../../static/hch-position/002.png',
                        callout: {
                            content: "门店XXXXX2号店",
                            borderRadius: 10,
                            padding: 10,
                            display: "ALWAYS",
                        }
                    }
                ],
            }
        },
        components: {
            hchPosition,
        },
        methods: {
            getAddress() {
                let _this = this
                uni.getLocation({
                    type: 'gcj02',
                    success: function(res) {
                        const latitude = res.latitude
                        const longitude = res.longitude
                        _this.latitude = latitude
                        _this.longitude = longitude
                        console.log('当前位置的经度：' + res.longitude);
                        console.log('当前位置的纬度：' + res.latitude);
                    }
                })
                
            },
        },
        onLoad(options) {
            console.log("options",options)
            this.name = options.name
        }
    }
</script>

<style lang="scss">
    .status_bar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 176rpx;

        text {
            font-family: PingFang-SC-Bold;
            font-size: 36rpx;
            font-weight: 600;
            color: #191919;
            margin-top: 75rpx;
        }
    }

    .box {
        position: fixed;
        height: 100%;
        background-color: #eee;
    }

    hchPosition {
        width: 750rpx;
        height: 500rpx;
    }

    .myadd {
        margin: 59rpx 30rpx 30rpx;

        .span {
            margin-left: 30rpx;
            font-family: PingFang-SC-Bold;
            font-size: 32rpx;
            font-weight: 600;
            line-height: 38rpx;
            letter-spacing: 0rpx;
            color: #191919;
        }

        .choosemyaddress {
            box-sizing: border-box;
            height: 98rpx;
            background-color: #ffffff;
            border-radius: 20rpx;
            margin: 30rpx;
            padding: 30rpx;

            text {
                font-size: 28rpx;
                color: #666666;
            }

            image {
                width: 50rpx;
                height: 50rpx;
                border-radius: 30rpx;
                float: right;
            }
        }
    }

    .other {
        margin: 59rpx 30rpx 30rpx;

        .span {
            margin-left: 30rpx;
            font-family: PingFang-SC-Bold;
            font-size: 32rpx;
            font-weight: 600;
            line-height: 38rpx;
            letter-spacing: 0rpx;
            color: #191919;
        }

        .otherservice {
            box-sizing: border-box;
            background-color: #ffffff;
            border-radius: 20rpx;
            margin: 30rpx;
            padding: 0 30rpx;
            line-height: 98rpx;

            .view1,
            .view2 {
                font-size: 28rpx;
                color: #666666;
                height: 98rpx;

                .text {
                    float: right;
                }
            }

            .view1 {
                border-bottom: 1px solid #EEEEEE;
            }
        }
    }
</style>
